import React,{useEffect} from 'react'
import Logo from '../assets/images/index/logo.png'
import User from '../assets/images/index/user.png'
import { Divider } from 'antd'
import { useNavigate } from 'react-router-dom'
import Test1 from '../assets/images/test/test-1.png'
import Test2 from '../assets/images/test/test-2.png'
import Test3 from '../assets/images/test/test-3.png'
import Test4 from '../assets/images/test/test-4.png'
import Test5 from '../assets/images/test/test-5.png'
import Test6 from '../assets/images/test/test-6.png'
import Clock from '../assets/images/test/clock.png'
import TestApi from '../apis/test'
export default function test() {

    useEffect(() =>{
        
    },[])
    const navigate = useNavigate()
    function toIndex(){
        navigate('/index')
    }
    function toError(){
        navigate('/error')
    }
    function toCollection(){
        navigate('/collection')
    }
    function toStart(){
        navigate('/starttest')
    }
    return (
        <div>
            <div className='toubu'>
                <img src={Logo} alt="" style={{ marginLeft: 360 }} />
                <div style={{ width: 320, display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer', marginRight: 300 }} className='toubuwz'>
                    <span onClick={toIndex}>首页</span>
                    <span className='indexbg'>考试</span>
                    <span onClick={toError}>错题本</span>
                    <span onClick={toCollection}>收藏夹</span>
                </div>
                <div>
                    <img src={User} alt="" />
                    <span style={{ marginRight: 382 }} className='toubuwz'>李四</span>
                </div>
            </div>
            <div style={{ width: 1200, marginTop: 10, marginBottom: 10 }} className='m0'>
                <span style={{ fontSize: 20, color: '#6966eb' }}>首页</span>
                <span>＞</span>
                <span style={{ fontSize: 20, color: '#333333' }}>考试</span>
            </div>
            <div className='m0 testingBox' style={{ width: 1200 }}>
                <div style={{ width: 1140, marginTop: 30 }}> <span style={{ marginLeft: 30, fontSize: 20, color: '#333333' }}>正在进行的考试</span></div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
                <div style={{ display: 'flex', width: 1140, height: 130, alignItems: 'center', flexWrap: 'wrap' ,justifyContent:'space-between'}} className="m0">
                    <div style={{ width: 130, height: 88 }}><img src={Test1} alt="" /></div>
                    <div style={{marginLeft:-650}}>
                        <div style={{marginBottom:10}}>
                            <span style={{fontSize:16,color:'#333333',marginRight:10}}>前端HTML测试题</span> <span style={{width:46,height:20,backgroundColor:'#6966eb',borderRadius:2,fontSize:13,color:'#fff'}}>可参加</span>
                        </div>
                        <div>
                            <span style={{fontSize:12,color:'#666666',marginRight:20}}>2022-03-31 09:48~2022-04-03 09:48</span>
                            <span style={{fontSize:12,color:'#666666'}}><img src={Clock} alt="" style={{ width: 12, height: 12 }} /> 限时60分钟</span>
                        </div>
                    </div>
                    <div onClick={toStart}><button style={{backgroundColor:'#6966eb',borderRadius:4,color:'#fff',border:'none',}}>进入</button></div>
                </div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
                <div style={{ display: 'flex', width: 1140, height: 130, alignItems: 'center', flexWrap: 'wrap' ,justifyContent:'space-between'}} className="m0">
                    <div style={{ width: 130, height: 88 }}><img src={Test2} alt="" /></div>
                    <div style={{marginLeft:-650}}>
                        <div style={{marginBottom:10}}>
                            <span style={{fontSize:16,color:'#333333',marginRight:10}}>前端HTML测试题</span> <span style={{width:46,height:20,backgroundColor:'#6966eb',borderRadius:2,fontSize:13,color:'#fff'}}>可参加</span>
                        </div>
                        <div>
                            <span style={{fontSize:12,color:'#666666',marginRight:20}}>2022-03-31 09:48~2022-04-03 09:48</span>
                            <span style={{fontSize:12,color:'#666666'}}><img src={Clock} alt="" style={{ width: 12, height: 12 }} /> 限时60分钟</span>
                        </div>
                    </div>
                    <div onClick={toStart}><button style={{backgroundColor:'#6966eb',borderRadius:4,color:'#fff',border:'none'}}>进入</button></div>
                </div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
                <div style={{ display: 'flex', width: 1140, height: 130, alignItems: 'center', flexWrap: 'wrap' ,justifyContent:'space-between'}} className="m0">
                    <div style={{ width: 130, height: 88 }}><img src={Test3} alt="" /></div>
                    <div style={{marginLeft:-650}}>
                        <div style={{marginBottom:10}}>
                            <span style={{fontSize:16,color:'#333333',marginRight:10}}>前端HTML测试题</span> <span style={{width:46,height:20,backgroundColor:'#6966eb',borderRadius:2,fontSize:13,color:'#fff'}}>可参加</span>
                        </div>
                        <div>
                            <span style={{fontSize:12,color:'#666666',marginRight:20}}>2022-03-31 09:48~2022-04-03 09:48</span>
                            <span style={{fontSize:12,color:'#666666'}}><img src={Clock} alt="" style={{ width: 12, height: 12 }} /> 限时60分钟</span>
                        </div>
                    </div>
                    <div onClick={toStart}><button style={{backgroundColor:'#6966eb',borderRadius:4,color:'#fff',border:'none'}}>进入</button></div>
                </div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
                <div style={{ display: 'flex', width: 1140, height: 130, alignItems: 'center', flexWrap: 'wrap' ,justifyContent:'space-between'}} className="m0">
                    <div style={{ width: 130, height: 88 }}><img src={Test4} alt="" /></div>
                    <div style={{marginLeft:-650}}>
                        <div style={{marginBottom:10}}>
                            <span style={{fontSize:16,color:'#333333',marginRight:10}}>前端HTML测试题</span> <span style={{width:46,height:20,backgroundColor:'#6966eb',borderRadius:2,fontSize:13,color:'#fff'}}>可参加</span>
                        </div>
                        <div>
                            <span style={{fontSize:12,color:'#666666',marginRight:20}}>2022-03-31 09:48~2022-04-03 09:48</span>
                            <span style={{fontSize:12,color:'#666666'}}><img src={Clock} alt="" style={{ width: 12, height: 12 }} /> 限时60分钟</span>
                        </div>
                    </div>
                    <div onClick={toStart}><button style={{backgroundColor:'#6966eb',borderRadius:4,color:'#fff',border:'none'}}>进入</button></div>
                </div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
            </div>
            <div className='tested m0' style={{ marginTop: 50 }}>
                <div style={{ width: 1140, marginTop: 30 }}> <span style={{ marginLeft: 30, fontSize: 20, color: '#333333' }}>已经完成的考试</span></div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
                <div style={{ display: 'flex', width: 1140, height: 130, alignItems: 'center', flexWrap: 'wrap' ,justifyContent:'space-between'}} className="m0">
                    <div style={{ width: 130, height: 88 }}><img src={Test5} alt="" /></div>
                    <div style={{marginLeft:-650}}>
                        <div style={{marginBottom:10}}>
                            <span style={{fontSize:16,color:'#333333',marginRight:10}}>前端HTML测试题</span> <span style={{width:46,height:20,backgroundColor:'#7c7c7c',borderRadius:2,fontSize:13,color:'#fff'}}>已完成</span>
                        </div>
                        <div>
                            <span style={{fontSize:12,color:'#666666',marginRight:20}}>2022-03-31 09:48~2022-04-03 09:48</span>
                            <span style={{fontSize:12,color:'#666666'}}><img src={Clock} alt="" style={{ width: 12, height: 12 }} /> 限时60分钟</span>
                        </div>
                    </div>
                    <div><button style={{backgroundColor:'#6966eb',borderRadius:4,color:'#fff',border:'none'}}>查看</button></div>
                </div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
                <div style={{ display: 'flex', width: 1140, height: 130, alignItems: 'center', flexWrap: 'wrap' ,justifyContent:'space-between'}} className="m0">
                    <div style={{ width: 130, height: 88 }}><img src={Test6} alt="" /></div>
                    <div style={{marginLeft:-650}}>
                        <div style={{marginBottom:10}}>
                            <span style={{fontSize:16,color:'#333333',marginRight:10}}>前端HTML测试题</span> <span style={{width:46,height:20,backgroundColor:'#7c7c7c',borderRadius:2,fontSize:13,color:'#fff'}}>已完成</span>
                        </div>
                        <div>
                            <span style={{fontSize:12,color:'#666666',marginRight:20}}>2022-03-31 09:48~2022-04-03 09:48</span>
                            <span style={{fontSize:12,color:'#666666'}}><img src={Clock} alt="" style={{ width: 12, height: 12 }} /> 限时60分钟</span>
                        </div>
                    </div>
                    <div><button style={{backgroundColor:'#6966eb',borderRadius:4,color:'#fff',border:'none'}}>查看</button></div>
                </div>
                <div style={{ width: 1140 }} className='m0'><Divider></Divider></div>
            </div>
            <div className='footer'>
                Copyright © 2021  成都蜗牛创想科技有限公司
            </div>
        </div>
    )
}
